<template>
  <div class="bar">
    <el-tooltip
      v-for="button in toolbarButtons"
      :key="button.name"
      :placement="button.placement || 'bottom'"
      :content="button.tooltip"
    >
      <el-button
        :name="button.name"
        @click="handleClick"
        class="item-space"
        size="small"
        :disabled="button.disabled ? button.disabled() : false"
      >
        <el-icon v-if="button.icon">
          <component :is="button.icon" />
        </el-icon>
        {{ button.text }}
      </el-button>
    </el-tooltip>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, markRaw } from "vue";
import { FlowGraph } from "../../graph";
import { DataUri } from "@antv/x6";
import {
  Delete,
  RefreshLeft,
  RefreshRight,
  CopyDocument,
  Scissor,
  DocumentCopy,
  Picture as PictureIcon,
  SetUp,
  Download,
  Refresh
} from "@element-plus/icons-vue";

export default defineComponent({
  name: "Index",
  components: {
    Delete,
    RefreshLeft,
    RefreshRight,
    CopyDocument,
    Scissor,
    DocumentCopy,
    PictureIcon,
    SetUp,
    Download,
    Refresh
  },
  setup() {
    const { graph } = FlowGraph;

    const canUndo = ref(graph.canUndo());
    const canRedo = ref(graph.canRedo());

    // 工具栏按钮配置
    const toolbarButtons = ref([
      {
        name: "delete",
        text: "清除",
        tooltip: "清除 (Ctrl + D)",
        icon: markRaw(Delete),
        placement: "bottom"
      },
      {
        name: "undo",
        text: "撤销",
        tooltip: "撤销 (Ctrl + Z)",
        icon: markRaw(RefreshLeft),
        placement: "bottom",
        disabled: () => !canUndo.value
      },
      {
        name: "redo",
        text: "重做",
        tooltip: "重做 (Ctrl + Shift + Z)",
        icon: markRaw(RefreshRight),
        placement: "bottom",
        disabled: () => !canRedo.value
      },
      {
        name: "copy",
        text: "复制",
        tooltip: "复制 (Ctrl + C)",
        icon: markRaw(CopyDocument),
        placement: "bottom"
      },
      {
        name: "cut",
        text: "剪切",
        tooltip: "剪切 (Ctrl + X)",
        icon: markRaw(Scissor),
        placement: "bottom"
      },
      {
        name: "paste",
        text: "粘贴",
        tooltip: "粘贴 (Ctrl + V)",
        icon: markRaw(DocumentCopy),
        placement: "bottom"
      },
      {
        name: "savePNG",
        text: "保存PNG",
        tooltip: "保存PNG (Ctrl + S)",
        icon: markRaw(PictureIcon),
        placement: "bottom"
      },
      {
        name: "saveSVG",
        text: "保存SVG",
        tooltip: "保存SVG (Ctrl + S)",
        icon: markRaw(SetUp),
        placement: "bottom"
      },
      {
        name: "toJSON",
        text: "导出",
        tooltip: "导出 (Ctrl + P)",
        icon: markRaw(Download),
        placement: "bottom"
      }
    ]);

    const copy = () => {
      const { graph } = FlowGraph;
      const cells = graph.getSelectedCells();
      if (cells.length) {
        graph.copy(cells);
      }
      return false;
    };

    const cut = () => {
      const { graph } = FlowGraph;
      const cells = graph.getSelectedCells();
      if (cells.length) {
        graph.cut(cells);
      }
      return false;
    };

    const paste = () => {
      const { graph } = FlowGraph;
      if (!graph.isClipboardEmpty()) {
        const cells = graph.paste({ offset: 32 });
        graph.cleanSelection();
        graph.select(cells);
      }
      return false;
    };

    const handleClick = (event: Event) => {
      const { graph } = FlowGraph;
      const name = (event.currentTarget as any).name!;
      console.log(name);
      switch (name) {
        case "undo":
          graph.undo();
          break;
        case "redo":
          graph.redo();
          break;
        case "delete":
          graph.clearCells();
          break;
        case "savePNG":
          graph.toPNG(
            (dataUri: string) => {
              // 下载
              DataUri.downloadDataUri(dataUri, "chartx.png");
            },
            {
              backgroundColor: "white",
              padding: {
                top: 20,
                right: 30,
                bottom: 40,
                left: 50
              },
              quality: 1
            }
          );
          break;
        case "saveSVG":
          graph.exportSVG();
          break;
        case "copy":
          copy();
          break;
        case "cut":
          cut();
          break;
        case "paste":
          paste();
          break;
        case "toJSON":
          console.log(graph.toJSON());
          // graph.fromJSON({cells:[graph.toJSON().cells[0],graph.toJSON().cells[1]]})
          break;
        default:
          break;
      }
    };

    graph.on("history:change", () => {
      canUndo.value = graph.canUndo();
      canRedo.value = graph.canRedo();
    });
    graph.bindKey("ctrl+z", () => {
      if (graph.canUndo()) {
        graph.undo();
      }
      return false;
    });
    graph.bindKey("ctrl+shift+z", () => {
      if (graph.canRedo()) {
        graph.redo();
      }
      return false;
    });
    graph.bindKey("ctrl+d", () => {
      graph.clearCells();
      return false;
    });
    graph.bindKey("ctrl+s", () => {
      graph.toPNG((datauri: string) => {
        DataUri.downloadDataUri(datauri, "chart.png");
      });
      return false;
    });

    graph.bindKey("ctrl+c", copy);
    graph.bindKey("ctrl+v", paste);
    graph.bindKey("ctrl+x", cut);

    return {
      canUndo,
      canRedo,
      copy,
      cut,
      paste,
      handleClick,
      toolbarButtons
    };
  }
});
</script>

<style lang="scss" scoped>
.bar {
  display: flex;
  align-items: center;
  margin-right: 16px;
}
.item-space {
  margin-left: 8px;
}
</style>
